<div class="modal-header">
    <h5 class="modal-title" i-translate="LOOKUP_REAGENTS"></h5>
</div>
<div class="modal-body modal-body-search">
    <uib-tabset class="inner-tabs"
                active="vm.activeTabIndex">
        <uib-tab heading="My Reagent List">
            <div class="reagent-search-tab">
                <div class="input-group m-b20">
                    <input type="text" class="form-control" ng-model="vm.myReagents.searchQuery"/>
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-can-loading"
                                ng-class="{'btn-loading': vm.loading}"
                                ng-click="vm.searchMyReagents(vm.myReagents.searchQuery)"
                                type="button"
                                i-translate="SEARCH">
                        </button>
                        <button class="btn btn-info"
                                ng-click="vm.clearMyReagentsSearchQuery()"
                                type="button"
                                i-translate="CLEAR">
                        </button>
                    </span>
                </div>
                <div class="clearfix m-b20">
                    <span class="semi-b"><span ng-bind="vm.myReagentList.length"></span> reagents in my list</span>
                </div>
                <div class="m-b20">
                    <indigo-search-result-table indigo-table-content="vm.myReagentList"
                                                indigo-table-filter="vm.filterMyReagents"
                                                is-multiple="true"
                                                indigo-editable-info="true"></indigo-search-result-table>
                </div>
                <div class="btn-group pull-right">
                    <button class="btn btn-info"
                            type="button"
                            ng-click="vm.removeFromMyReagentList()"
                            ng-disabled="false">
                        <span class="icon icon-delete"></span><span class="m-l5" i-translate="REMOVE_FROM_MY_LIST"></span>
                    </button>
                    <button class="btn btn-info"
                            type="button"
                            ng-click="vm.addToStoichTable(vm.myReagentList)"
                            ng-disabled="false">
                        <span class="icon icon-add"></span><span class="m-l5" i-translate="ADD_TO_STOICH_TABLE"></span>
                    </button>
                    <button class="btn btn-default" type="button" ng-click="vm.cancel()">
                        <span class="icon icon-stop"></span><span class="m-l5" i-translate="CANCEL"></span>
                    </button>
                </div>
            </div>
        </uib-tab>
        <uib-tab heading="Reagent Catalog">
            <div class="reagent-search-tab"
                 ng-init="vm.isAdvancedSearchCollapsed = true">
                <div ng-if="!vm.isSearchResultFound">
                    <indigo-checklist indigo-items="vm.model.databases"
                                      indigo-label="{{ vm.chooseDBLabel }}"
                                      class="m-b20"></indigo-checklist>
                    <div class="m-b20">
                        <div class="main-search-block">
                            <div class="row">
                                <div class="col-xs-9">
                                    <simple-input>
                                        <span i-translate="TYPE_IN_YOUR_SEARCH_QUERY"></span>
                                        <input class="form-control" ng-model="vm.model.restrictions.searchQuery">
                                    </simple-input>
                                </div>
                                <div class="col-xs-3">
                                    <a class="link-advanced-search"
                                       ng-click="vm.isAdvancedSearchCollapsed = !vm.isAdvancedSearchCollapsed">
                                        Advanced search
                                        <span ng-class="{'glyphicon glyphicon-chevron-down':vm.isAdvancedSearchCollapsed,
                                                 'glyphicon glyphicon-chevron-up':!vm.isAdvancedSearchCollapsed}"></span>
                                    </a>
                                </div>
                            </div>
                            <div class="search-hint" i-translate="IF_YOU_SEARCH_A_MOLECULAR_FORMULA"></div>
                        </div>
                        <div uib-collapse="vm.isAdvancedSearchCollapsed" class="collapse-content">
                            <div ng-if="!vm.isSearchResultFound">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="COMPOUND_ID" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.compoundId.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.compoundId.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="NBK_BATCH" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.fullNbkBatch.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.fullNbkBatch.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="MOLECULAR_FORMULA" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.formula.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.formula.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="MOLECULAR_WEIGHT" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionNumber"
                                                      model="vm.model.restrictions.advancedSearch.molWeight.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.molWeight.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="CHEMICAL_NAME" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionChemicalName"
                                                      model="vm.model.restrictions.advancedSearch.chemicalName.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.chemicalName.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="EXTERNAL_NUMBER" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.externalNumber.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.externalNumber.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="COMPOUND_STATE" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-6">
                                        <autocomplete items="vm.compoundStatesList"
                                                      model="vm.compoundStateModel"
                                                      on-select="vm.updateCompoundState()"
                                                      on-remove="vm.updateCompoundState()">
                                        </autocomplete>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3"><label class="control-label"><span
                                        ng-bind="vm.model.restrictions.advancedSearch.comments.name"></span>:</label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.comments.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.comments.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="BATCH_HAZARD_COMMENT"
                                               i-end=":"></label></div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.hazardComments.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.hazardComments.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="CAS_NUMBER" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.casNumber.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.casNumber.value">
                                        </simple-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="m-b20">
                        <h5>Or draw structure</h5>
                        <div class="row">
                            <div class="col-xs-2"><label class="control-label">Similarity criteria</label></div>
                            <div class="col-xs-4">
                                <autocomplete items="vm.conditionSimilarity"
                                              model="vm.model.restrictions.structure.similarityCriteria">
                                </autocomplete>
                            </div>
                            <div ng-if="vm.model.restrictions.structure.similarityCriteria.name == 'similarity'">
                                <simple-input class="col-xs-2 search-reagents__criteria-input"
                                              validation-pattern-text="Enter 1-100">
                                    <input class="form-control"
                                           ng-attr-name="similarityValue"
                                           ng-pattern="/^\d{1,2}(?!\d)|100$/"
                                           maxlength="3"
                                           required
                                           ng-model="vm.model.restrictions.structure.similarityValue">
                                </simple-input>
                                <div class="relative">
                                    <span class="absolute top-7">%</span>
                                </div>
                            </div>
                        </div>
                        <indigo-structure-scheme class="search-structure-scheme"
                                                 ss-structure-type="molecule"
                                                 ss-autosave="false"
                                                 ss-title="'Structure'"
                                                 ss-model="vm.model.restrictions.structure"
                                                 on-changed="vm.onChangedStructure(structure)">
                        </indigo-structure-scheme>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary btn-can-loading"
                                ng-class="{'btn-loading': vm.loading}"
                                type="button"
                                ng-click="vm.search()"
                                ng-disabled="!vm.model.restrictions.structure.image && !vm.isAdvancedSearchFilled() &&
                                                            !vm.model.restrictions.searchQuery">Search
                        </button>
                        <button class="btn btn-default" type="button" ng-click="vm.cancel()"
                                ng-if="!vm.isSearchResultFound">
                            <span class="icon icon-stop"></span><span class="m-l5">Cancel</span>
                        </button>
                    </div>
                </div>
                <div ng-if="vm.isSearchResultFound">
                    <div>Search results for
                        <span ng-if="vm.model.restrictions.structure.image"> structure
                            <div class="search-image">
                                <img class="full-img structure-scheme__img"
                                     ng-src="data:image/svg+xml;base64,{{vm.model.restrictions.structure.image}}"
                                     alt="Image is unavailable.">
                            </div>
                        </span>
                        <span class="semi-b"
                              ng-if="!vm.model.restrictions.structure.image && vm.model.advancedSummary.length">&quot;
                            <span ng-repeat="restriction in vm.model.advancedSummary track by $index">
                                <span ng-bind="restriction.name"></span>: <span ng-if="restriction.condition.name"
                                                                                ng-bind="restriction.condition.name"></span>
                                <span ng-bind="restriction.value.name || restriction.value"></span>
                                <span ng-if="!$last">AND </span></span>&quot;</span>
                        <span class="semi-b" ng-if="!vm.model.restrictions.structure.image &&
                                                        !vm.model.advancedSummary.length && vm.model.restrictions.searchQuery">
                            &quot;{{vm.model.restrictions.searchQuery}}&quot;</span>
                    </div>
                    <div class="m-b20">
                        <div class="reagent-search-collapse" ng-init="isChangeQueryCollapsed=true">
                            <a ng-click="isChangeQueryCollapsed = !isChangeQueryCollapsed">
                                                        <span ng-class="{'glyphicon glyphicon-triangle-right':isChangeQueryCollapsed,
                                                             'glyphicon glyphicon-triangle-bottom':!isChangeQueryCollapsed}"></span>Change
                                search query</a></div>
                        <div uib-collapse="isChangeQueryCollapsed" class="collapse-content">

                            <indigo-checklist indigo-items="vm.model.databases"
                                              indigo-label="{{ vm.chooseDBLabel }}"
                                              class="m-b20"></indigo-checklist>

                            <div class="main-search-block m-b20">
                                <div class="row">
                                    <div class="col-xs-9">
                                        <simple-input>
                                            <span i-translate="TYPE_IN_YOUR_SEARCH_QUERY"></span>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.searchQuery">
                                        </simple-input>
                                    </div>
                                    <div class="col-xs-3">
                                        <a class="link-advanced-search"
                                           ng-click="vm.isAdvancedSearchCollapsed = !vm.isAdvancedSearchCollapsed">
                                            Advanced search
                                            <span ng-class="{'glyphicon glyphicon-chevron-down':vm.isAdvancedSearchCollapsed,
                                                                 'glyphicon glyphicon-chevron-up':!vm.isAdvancedSearchCollapsed}"></span>
                                        </a>
                                    </div>
                                </div>
                                <div class="search-hint" i-translate="IF_YOU_SEARCH_A_MOLECULAR_FORMULA">
                                </div>
                            </div>
                            <div uib-collapse="vm.isAdvancedSearchCollapsed" class="collapse-content">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="COMPOUND_ID" i-end=":"></label></div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.compoundId.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.compoundId.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="NBK_BATCH" i-end=":"></label></div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.fullNbkBatch.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.fullNbkBatch.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="MOLECULAR_FORMULA" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.formula.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.formula.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="MOLECULAR_WEIGHT" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionNumber"
                                                      model="vm.model.restrictions.advancedSearch.molWeight.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.molWeight.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="CHEMICAL_NAME" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionChemicalName"
                                                      model="vm.model.restrictions.advancedSearch.chemicalName.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.chemicalName.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="EXTERNAL_NUMBER" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.externalNumber.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.externalNumber.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="COMPOUND_STATE" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-6">
                                        <autocomplete items="vm.compoundStatesList"
                                                      model="vm.compoundStateModel"
                                                      on-select="vm.updateCompoundState()"
                                                      on-remove="vm.updateCompoundState()">
                                        </autocomplete>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="BATCH_COMMENT" i-end=":"></label>
                                    </div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.comments.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.comments.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="BATCH_HAZARD_COMMENT"
                                               i-end=":"></label></div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.hazardComments.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.hazardComments.value">
                                        </simple-input>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <label class="control-label" i-translate="CAS_NUMBER" i-end=":"></label></div>
                                    <div class="col-xs-3">
                                        <autocomplete items="vm.conditionText"
                                                      model="vm.model.restrictions.advancedSearch.casNumber.condition">
                                        </autocomplete>
                                    </div>
                                    <div class="col-xs-3">
                                        <simple-input>
                                            <input class="form-control"
                                                   ng-model="vm.model.restrictions.advancedSearch.casNumber.value">
                                        </simple-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reagent-search-collapse" ng-init="isReDrawStructureCollapsed=true">
                            <a ng-click="isReDrawStructureCollapsed = !isReDrawStructureCollapsed">
                                                        <span ng-class="{'glyphicon glyphicon-triangle-right':isReDrawStructureCollapsed,
                                                             'glyphicon glyphicon-triangle-bottom':!isReDrawStructureCollapsed}"></span>Draw
                                structure</a></div>
                        <div uib-collapse="isReDrawStructureCollapsed" class="collapse-content">
                            <div class="row">
                                <div class="col-xs-2"><label class="control-label"
                                                             i-translate="SIMILARITY_CRITERIA"></label></div>
                                <div class="col-xs-4">
                                    <autocomplete items="vm.conditionSimilarity"
                                                  model="vm.model.restrictions.structure.similarityCriteria">
                                    </autocomplete>
                                </div>
                                <div ng-if="vm.model.restrictions.structure.similarityCriteria.name == 'similarity'">
                                    <simple-input class="col-xs-2 search-reagents__criteria-input"
                                                  validation-pattern-text="Enter 1-100">
                                        <input class="form-control"
                                               ng-attr-name="similarityValue"
                                               ng-pattern="/^\d{1,2}(?!\d)|100$/"
                                               required
                                               ng-model="vm.model.restrictions.structure.similarityValue">
                                    </simple-input>
                                    <div class="relative"><span class="absolute top-7">%</span>
                                    </div>
                                </div>
                            </div>

                            <indigo-structure-scheme class="search-structure-scheme"
                                                     ss-structure-type="molecule"
                                                     ss-autosave="false"
                                                     ss-title="'Structure'"
                                                     ss-model="vm.model.restrictions.structure"
                                                     on-changed="vm.onChangedStructure(structure)">
                            </indigo-structure-scheme>
                        </div>
                    </div>
                    <div class="m-b20">
                        <button class="btn btn-primary btn-can-loading"
                                ng-class="{'btn-loading': vm.loading}"
                                type="button"
                                ng-click="vm.search()"
                                ng-disabled="!vm.model.restrictions.structure.image && !vm.isAdvancedSearchFilled() &&
                                                            !vm.model.restrictions.searchQuery"
                                i-translate="SEARCH">
                        </button>
                        <span class="semi-b search-result-table-label" ng-if="!vm.loading">
                            <span ng-bind="vm.searchResults.length"></span> results found</span>

                    </div>
                    <div class="clearfix m-b20">

                    </div>
                    <div class="m-b20">
                        <indigo-search-result-table indigo-table-content="vm.searchResults"
                                                    indigo-editable-info="false"
                                                    is-multiple="true"
                                                    on-change-selected-items="vm.selectedItems = items"></indigo-search-result-table>
                    </div>
                    <div class="btn-group pull-right">
                        <button class="btn btn-info" type="button" ng-click="vm.addToMyReagentList()"
                                ng-disabled="!vm.selectedItems.length">
                            <span class="icon icon-add"></span><span class="m-l5"
                                                                  i-translate="ADD_TO_MY_REAGENT_LIST"></span>
                        </button>
                        <button class="btn btn-info" type="button" ng-click="vm.addToStoichTable(vm.searchResults)"
                                ng-disabled="!vm.selectedItems.length">
                            <span class="icon icon-add"></span><span class="m-l5" i-translate="ADD_TO_STOICH_TABLE"></span>
                        </button>
                        <button class="btn btn-default" type="button" ng-click="vm.cancel()">
                            <span class="icon icon-stop"></span><span class="m-l5" i-translate="CANCEL"></span>
                        </button>
                    </div>
                </div>
            </div>
        </uib-tab>
        </uib-tab>
    </uib-tabset>
</div>
